<template>
  <div>
   <p>computed 原始字符串: {{ message }}</p>
   <p>computed 计算后反转字符串: {{ reverseMessage }}</p>
   <p>methods 原始字符串: {{ message2 }}</p>
   <p>methods 计算后反转字符串: {{ reverseMessage2() }}</p>
   <button v-on:click="setSite">点击设置新的site值 并且给name 和 url设置新的值</button>
  </div>
</template>

<script>
export default {
  name: 'calculate',
  data () {
    return {
      message: 'Runoob!',
      message2: 'Runoob!',
      name: 'Google',
      url: 'http://www.google.com'
    }
  },
  methods: {//  这里为啥没有效果
    reverseMessage2: function () {
      console.log('methods reverseMessage')
      return this.message2.split('').reverse().join('')
    },
    setSite: function () {
      this.site = '菜鸟教程 http://www.runoob.com'
      setTimeout(() => {
        alert(this.name)
        alert(this.url)
      }, 1000)
    }
  },
  computed: {// 计算属性的关键值 computed 调用和methods的区别
    reverseMessage: function () {
      console.log('computed reverseMessage')
      return this.message.split('').reverse().join('')
    },
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
}
// 这里设置这个site 其实是不合理的因为vue的刷新机制并没有进入 set方法里面去为了性能优化它默认是延时设置的
// 我们发现这个set get 和 其他语言中的很类似
// this.site = '菜鸟教程 http://www.runoob.com'
// document.write('<br>')
// document.write('calculte name: ' + this.name)
// document.write('<br>')
// document.write('calculte url: ' + this.url)
</script>

<style >

</style>
